import { disableTips } from '@/filters/filters';
import { formatAxis } from '@/utils/formatTime';
import { CountUp } from 'countup.js';
import Scroll from 'vue-seamless-scroll';
import * as echarts from 'echarts';
export default {
    name: "Home",
    components: { Scroll },
    data() {
        return {
            searchCol: {
				page: 1,
                size: 10
            },
            tableData: [],
            totalPages: 0,
			total: 0,
            totalCount: {},
            totalCountToday: {},
            height: 0,

            getUserInfos: {},
            dailyMessages: [
                '祝你开心每一天！',
                '忙碌了一周，停一停脚步！',
                '世间美好，与你环环相扣！',
                '永远相信美好的事情即将发生！',
                '每一天，遇见更好的自己！',
                '保持热爱，奔赴山海！',
                '生活明朗，万物可爱！',
                '愿每一天醒来都是美好的开始！',
                '没有希望的地方，就没有奋斗！',
                '我最珍贵的时光都行走在路上！',
                '成功，往往住在失败的隔壁！',
                '人只要不失去方向，就不会失去自己！',
                '每条堵住的路，都有一个出口！',
                '没有谁能击垮你，除非你自甘堕落！',
                '微笑着的人并非没有痛苦！',
                '生活变的再糟糕，也不妨碍我变得更好！',
                '你要悄悄努力，然后惊艳众人！',
            ],
            newsInfoList: [
                {
                    title: '[发布] 2021年02月28日发布基于 vue3.x + vite v1.0.0 版本',
                    date: '02/28',
                    link: 'https://gitee.com/lyt-top/vue-next-admin',
                },
                {
                    title: '[发布] 2021年04月15日发布 vue2.x + webpack 重构版本',
                    date: '04/15',
                    link: 'https://gitee.com/lyt-top/vue-next-admin/tree/vue-prev-admin/',
                },
                {
                    title: '[重构] 2021年04月10日 重构 vue2.x + webpack v1.0.0 版本',
                    date: '04/10',
                    link: 'https://gitee.com/lyt-top/vue-next-admin/tree/vue-prev-admin/',
                },
                {
                    title: '[预览] 2020年12月08日，基于 vue3.x 版本后台模板的预览',
                    date: '12/08',
                    link: 'http://lyt-top.gitee.io/vue-next-admin-preview/#/login',
                },
                {
                    title: '[预览] 2020年11月15日，基于 vue2.x 版本后台模板的预览',
                    date: '11/15',
                    link: 'https://lyt-top.gitee.io/vue-prev-admin-preview/#/login',
                },
            ],
            recommendList: [
                {
                    title: '优惠券',
                    msg: '现金券、折扣券、营销必备',
                    icon: 'el-icon-food',
                    bg: '#48D18D',
                    iconColor: '#64d89d',
                },
                {
                    title: '多人拼团',
                    msg: '社交电商、开辟流量',
                    icon: 'el-icon-shopping-bag-1',
                    bg: '#F95959',
                    iconColor: '#F86C6B',
                },
                {
                    title: '分销中心',
                    msg: '轻松招募分销员，成功推广奖励',
                    icon: 'el-icon-school',
                    bg: '#8595F4',
                    iconColor: '#92A1F4',
                },
                {
                    title: '秒杀',
                    msg: '超低价抢购引导更多销量',
                    icon: 'el-icon-alarm-clock',
                    bg: '#FEBB50',
                    iconColor: '#FDC566',
                },
            ],
            chartsRightList: [
                {
                    title: '距离60分钟订单数量',
                    num: 188,
                    icon: 'el-icon-document',
                    iconBg: '#C3E9FE',
                    color: '#1890FF',
                },
                {
                    title: '距离30分钟订单数量',
                    num: 15,
                    icon: 'el-icon-tickets',
                    iconBg: '#F1EBC5',
                    color: '#FDB850',
                },
                {
                    title: '已超时数量',
                    num: 6,
                    icon: 'el-icon-document-delete',
                    iconBg: '#F2D7C4',
                    color: '#F8958C',
                },
            ],
            dailyMessage: {},
            charts: {
				theme: '',
				bgColor: '',
			},
            global: {
				homeChartOne: null,
				homeChartTwo: null,
				homeCharThree: null,
				dispose: [null, '', undefined],
			},
        }
    },
    created() {
        const uObj = JSON.parse(sessionStorage.getItem('uObj'));
        if (uObj) {
            this.getUserInfos = uObj;
            this.getUserInfos.photo = "https://img0.baidu.com/it/u=1833472230,3849481738&fm=253&fmt=auto?w=200&h=200";
            console.log('this.getUserInfos', this.getUserInfos);
        }
        this.initDailyMessage();
        this.initNumCountUp();
        this.$nextTick(() => {
            this.initHomeStock();
            this.initHomeLaboratory();
            this.initHomeOvertime();
        })
    },
    computed: {
        currentTime() {
			return formatAxis(new Date());
		},
        optionSingleHeight() {
			return {
				singleHeight: 28,
				limitMoveNum: 8,
				waitTime: 2000,
			};
		},
    },
    methods: {
        initHomeStock() {
            if (!this.global.dispose.some((b) => b === this.global.homeChartOne)) this.global.homeChartOne.dispose();
            this.global.homeChartOne = echarts.init(this.$refs.homeStockRef, this.charts.theme);
            const option = {
				backgroundColor: this.charts.bgColor,
				grid: {
					top: 50,
					right: 20,
					bottom: 30,
					left: 30,
				},
				tooltip: {
					trigger: 'item',
				},
				legend: {
					left: 'center',
				},
				series: [
					{
						name: '邮件营销',
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						itemStyle: {
							borderRadius: 10,
							borderColor: '#fff',
							borderWidth: 2,
						},
						data: [
							{ value: 580, name: '邮件营销' },
							{ value: 300, name: '视频广告' },
							{ value: 230, name: '联盟广告' },
						],
						top: 30,
					},
				],
			};
			this.global.homeChartOne.setOption(option);
			window.addEventListener('resize', () => {
				this.global.homeChartOne.resize();
			});
        },
        // 履约情况
		initHomeLaboratory() {
			if (!this.global.dispose.some((b) => b === this.global.homeChartTwo)) this.global.homeChartTwo.dispose();
			this.global.homeChartTwo = echarts.init(this.$refs.homeLaboratoryRef, this.charts.theme);
			const option = {
				backgroundColor: this.charts.bgColor,
				grid: {
					top: 50,
					right: 20,
					bottom: 30,
					left: 30,
				},
				tooltip: {
					trigger: 'axis',
				},
				legend: {
					data: ['预购队列', '最新成交价'],
					right: 13,
				},
				xAxis: {
					data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
				},
				yAxis: [
					{
						type: 'value',
						name: '价格',
					},
				],
				series: [
					{
						name: '预购队列',
						type: 'bar',
						data: [5, 20, 36, 10, 10, 20],
					},
					{
						name: '最新成交价',
						type: 'line',
						data: [15, 20, 16, 20, 30, 8],
					},
				],
			};
			this.global.homeChartTwo.setOption(option);
			window.addEventListener('resize', () => {
				this.global.homeChartTwo.resize();
			});
		},
        // 缺货监控
        initHomeOvertime() {
			if (!this.global.dispose.some((b) => b === this.global.homeCharThree)) this.global.homeCharThree.dispose();
			this.global.homeCharThree = echarts.init(this.$refs.homeOvertimeRef, this.charts.theme);
			const option = {
				backgroundColor: this.charts.bgColor,
				grid: {
					top: 50,
					right: 20,
					bottom: 30,
					left: 30,
				},
				tooltip: {
					trigger: 'axis',
				},
				legend: {
					data: ['订单数量', '超时数量', '在线数量', '预警数量'],
					right: 13,
				},
				xAxis: {
					data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
				},
				yAxis: [
					{
						type: 'value',
						name: '数量',
					},
				],
				series: [
					{
						name: '订单数量',
						type: 'bar',
						data: [5, 20, 36, 10, 10, 20, 11, 13, 10, 9, 17, 19],
					},
					{
						name: '超时数量',
						type: 'bar',
						data: [15, 12, 26, 15, 11, 16, 31, 13, 5, 16, 13, 15],
					},
					{
						name: '在线数量',
						type: 'line',
						data: [15, 20, 16, 20, 30, 8, 16, 19, 12, 18, 19, 14],
					},
					{
						name: '预警数量',
						type: 'line',
						data: [10, 10, 13, 12, 15, 18, 19, 10, 12, 15, 11, 17],
					},
				],
			};
			this.global.homeCharThree.setOption(option);
			window.addEventListener('resize', () => {
				this.global.homeCharThree.resize();
			});
		},
        initDailyMessage() {
            this.dailyMessage = this.dailyMessages[Math.floor(Math.random() * this.dailyMessages.length)];
        },
		initNumCountUp() {
			this.$nextTick(() => {
				new CountUp('titleNum1', Math.random() * 100000).start();
				new CountUp('titleNum2', Math.random() * 100000).start();
				new CountUp('titleNum3', Math.random() * 100000).start();
			});
		},
        onNewsInfoListClick(v) {
            console.log('v', v);
        },
        onOpenGitee() {
            window.open('https://gitee.com/lyt-top/vue-next-admin');
        },
        // 监听 pagesize 改变的事件
		handleSizeChange(newSize) {
			console.log(`每页 ${newSize} 条`);
			this.searchCol.size = newSize;
			this.courseList();
		},
		//监听 页码值 改变的事件
		handleCurrentChange(newPage) {
			console.log(`当前页: ${newPage}`);
			this.searchCol.page = newPage;
			this.courseList();
		},
        courseList() {
            this.tableData.splice(0, this.tableData.length);

            this.$axios({
				method: "post",
				url: "api/web/course/page",
				data: this.searchCol
			}).then(res => {
                console.log(res);
				if (res.data.code === 200) {
					this.tableData = res.data.data;
					this.totalPages = res.data.pageData.totalPages;
					this.total = res.data.pageData.totalElements;
				} else {
					this.$message({
						message: "操作失败",
						type: "error"
					});
				}
			}).catch(error => {
				console.log(error);
				this.$message.error("请求失败");
			});
        },
		doEditSection(row) {
			this.$router.push({
                path: 'course/chapter/list',
				query: {
					id: row.uuid,
                    title: row.title
				}
            });
		},
		doEdit(row) {
			this.$router.push({
                path: "course/edit",
				query: {
					id: row.uuid
				}
            });
		},
        doDetail(row) {
			this.$router.push({
                path: "course/detail",
				query: {
					id: row.uuid
				}
            });
        },
		async setStatus(data, status) {
            const isNext = status !== 0 || await disableTips(this.$confirm);
            if (isNext) {
                this.$axios.get(`api/web/course/status/${data.uuid}/${status}`).then(res => {
                    if (res.data.code == 200) {
                        this.courseList();
                    } else {
                        this.$message({
                            message: status ? '启用失败' : '禁用失败',
                            type: "error"
                        });
                    }
                })
            }
		},
        getTotalCount() {
            this.$axios({
                method: "get",
                url: "api/web/stats/totalCount",
            }).then(async res => {
                console.log(res);
                if (res.data.code === 200) {
                    this.totalCount = res.data.data;
                } else {
                    this.$message({
                        message: "操作失败",
                        type: "error"
                    });
                }
            }).catch(error => {
                console.log(error);
                this.$message.error("请求失败");
            });
        },
        getTotalCountToday() {
            this.$axios({
                method: "get",
                url: "api/web/stats/totalCountToday",
            }).then(async res => {
                console.log(res);
                if (res.data.code === 200) {
                    this.totalCountToday = res.data.data;
                } else {
                    this.$message({
                        message: "操作失败",
                        type: "error"
                    });
                }
            }).catch(error => {
                console.log(error);
                this.$message.error("请求失败");
            });
        }
    }
}